<template>
    <div id="businessComfig">
        <div id="nav" >
             <img class="back" src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
             <div id="content">
                  <p class="title">闲置物品收购</p>
                  <section class="article">
                        <img style=""src="../../assets/tabber/money.png" alt="">
                        <p class="price">{{showData.amount}} <span>￥</span> </p>
                        <section class="time">
                            <p style="flex:1">{{showData.taskName}}</p>
                        </section>
                  </section>
                  <p class="description">商品描述</p>
                  <p>{{showData.taskExplain}}</p>
                  <img v-if='showData.common1' style="height:6rem;width:6rem;margin-right:4rem;" :src="showData.common1" alt="">
                  <img v-if='showData.common2' style="height:6rem;width:6rem;" :src="showData.common2" alt="">
             </div>
        </div>
        <div id="surePay">
            <p>总计<span>{{count}}</span></p>
            <p @click="payOff()" style="background:#29a193;width:50%;color:#ffffff;">确定支付</p>
        </div>
        
        <!--支付-->
        <div id="payWindow">  
        </div>
        <div id="payLayer" >  
           <p class="payPsw">
                请输入四位交易密码
                <img @click="closePay()" src="../../assets/task/chanelB.png" alt="">
            </p> 
            <section id="psw">
                <input ref="input1" v-model="iput1" maxlength="1" v-focus type="text">
                <input ref="input2" v-model="iput2" maxlength="1" type="text">
                <input ref="input3" v-model="iput3" maxlength="1" type="text">
                <input ref="input4" v-model="iput4" maxlength="1" type="text">
            </section> 
                <p class="sureMsg" @click="comfirmAdd">确定</p>
        </div> 
    </div>
</template>
<script>
export default {
  data () {
    return {
        checkPsw:{
            password:undefined,
        },
        iput1:'',
        iput2:'',
        iput3:'',
        iput4:'',
        count:0,
        showData:{
            amount:undefined,
            common1:undefined,
            common2:undefined,
        },
        alterSch:false,
        radio: '1',

    }
  },
   watch:{
      iput1: function (val) {
        if(val!=''){
          this.$refs.input1.blur();
          this.$refs.input2.focus();
        }
      },
      iput2: function (val) {
        if(val!=''){
          this.$refs.input2.blur();
          this.$refs.input3.focus();
        }
      },
      iput3: function (val) {
        if(val!=''){
          this.$refs.input3.blur();
          this.$refs.input4.focus();
        }
      },
      iput4: function (val) {
        if(val!=''){
          this.$refs.input4.blur();
        }
      }
    },
     directives: {
      focus: {
        // 自定义指令聚焦
        inserted: function (el) {
          el.focus()
        }
      }
    },
  created(){},
  mounted(){
        this.getParams()
  },
  methods:{
        // 同过验证添加二手任务
        comfirmAdd(){
             this.checkPsw.password = this.iput1+this.iput2+this.iput3+this.iput4
             this.$api.checkPayPsw(this.checkPsw).then((res)=>{
              if(res.code == '000000'){
                    this.$api.addSingTask(this.showData).then((res)=>{
                        if(res.code == '000000'){
                            this.$router.push({path:'/cueMsg'})
                        }
                    })
              }else{
                  return
              }
          })
        },
        payOff(){
            document.getElementById('payWindow').style.display = 'block';  
            document.getElementById('payLayer').style.display = 'block';
        },
        closePay() {  
            document.getElementById('payWindow').style.display = 'none';  
            document.getElementById('payLayer').style.display = 'none';  
        },
         getParams () {
             this.showData = this.$route.params.data;
             this.count = this.showData.amount
        },
  }
}
</script>
<style>
#businessComfig{
   height:100%;
  width:100%; 
}
#businessComfig #nav{
  color:#8a8a8a;
  height:58%;
  width:100%;
  background-image:url(../../assets/task/tab.png)
}
#businessComfig #nav .back{
  height:1rem;
  width:0.6rem;
  margin:0.8rem 0.6rem;  
}
#businessComfig #content{
    margin:1.5rem auto;
    width:80%;
}
#businessComfig #content .title{
    width:100%;
    text-align:center;
    height:3rem;
    line-height:3rem;
    border-bottom:1px solid #a1a1a1;
}
#businessComfig #content .article{
    margin-top:0.8rem;
    display:flex;
    justify-content:space-between;
}
#businessComfig #content .article .price{
    font-size:1.5rem;
    height:1.5rem;
    line-height:2.5rem;
    color:#8a8a8a;
    margin-right:2.5rem;
}
#businessComfig #content .article .time{
    text-align:right;
    font-size:0.8rem;
    display:flex;
    flex-direction:column;
}
#businessComfig #content .description{
    margin:1rem;
}
#businessComfig #surePay{
    width:100%;
    position:absolute;
    bottom:0px;
    display:flex;
    height:3rem;
    line-height:3rem;
    text-align:center;
}
#businessComfig #surePay p:nth-child(1){
    background:#fff;
    width:50%;
    color:#29a193;
}
#businessComfig #payWindow{  
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1;  
    display: none;
    position: absolute;       
}
#businessComfig  #payLayer {   
    width: 84%;
    height: 40%;
    background:#ffffff;  
    left: 8%;  
    top: 30%;
    color:#000;  
    z-index: 2; 
    display: none;
    color:#8a8a8a;
    font-size:0.7rem; 
    border-radius:13px;
    position: absolute;  
}
#businessComfig  #payLayer .payPsw{
    width:80%;
    height:2.5rem;
    margin:auto;
    line-height:3.5rem;
    font-size:1.2rem;
    text-align:center;
    font-weight:bold;
}
#businessComfig  #payLayer img{
    width:1.5rem;
    height:10x;
    float:right;
    margin-top:1rem;
}
#businessComfig #psw{
    width:80%;
    margin:3rem auto;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
}
#businessComfig #psw input{
    height:4rem;
    width:4rem;
    text-align:center;
    border:1px solid #8a8a8a;
}
#businessComfig .sureMsg{
    width:50%;
    background:#29a193;
    margin:auto;
    text-align:center;
    height:3rem;
    line-height:3rem;
    color:#fff;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
    border-radius:13px;
}
</style>